<template>
  <!--渐变柱状图-->
  <div :id="id" :class="className" :style="{ height: height, width: width }"/>
</template>

<script>
require('echarts/theme/macarons')
import resize from '@/components/echarts/mixins/resize'

export default {
  name: 'Curve',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData(newValue, oldValue) {
      // 确保在这里不会对未定义的newValue执行操作
      if (newValue) {
        // 当newValue有值时，更新ECharts
        this.$nextTick(() => {
          this.chart.setOption(newValue)
        })
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id), 'chart')
      this.setOption(this.chartData)
    },
    setOption({
      legendList,
      selectedLeg,
      xAxis,
      seriesData,
      colorList,
      typeList,
      unit,
      smooth,
      yAxisData,
      top, left, right, legendTop, legendLeft, legendRight, topShow
    } = {}) {
      if (!xAxis || xAxis.length === 0) {
        xAxis = []
      }
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll', // 启用滚动
          pageIconColor: '#00b0f0', // 滚动按钮激活状态下的按钮颜色
          pageIconInactiveColor: '#999999', // 滚动按钮非激活状态下的按钮颜色
          pageTextStyle: {
            color: '#f7f7f7', // 设置文本颜色（页码的文字颜色）
            fontSize: 11, // 设置文本的字体大小
            fontWeight: 'bold' // 设置文本的字体粗细
          },
          show: true,
          data: legendList,
          top: legendTop,
          left: legendLeft,
          right: legendRight,
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: 'PingFang SC, PingFang SC-Regular',
            fontSize: 11,
            fontWeight: 400
          },
          selected: selectedLeg ? selectedLeg : {}
        },
        grid: {
          top: top,
          left: left,
          right: right,
          bottom: '0%',
          containLabel: true
        },
        dataZoom: [{
          type: 'slider',
          show: false,
          start: 0,
          end: 100,
          handleSize: 8
        },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        xAxis: [{
          type: 'category',
          splitLine: {
            show: false
          },
          data: xAxis,
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontFamily: 'PingFang SC, PingFang SC-Regular',
              fontSize: 11,
              fontWeight: 400
            }
          }
        }],
        yAxis: [{
          name: unit,
          type: 'category',
          data: yAxisData,
          // min: minValue,
          // interval: 10,
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(102, 102, 153, .9)',
              width: 1,
              type: 'dashed' // 设置虚线
            }
          },
          nameTextStyle: {
            // y轴上方单位的颜色
            color: 'rgba(255,255,255,0.88)',
            fontFamily: 'PingFang SC, PingFang SC-Regular',
            fontSize: 11,
            fontWeight: 400
          },
          axisLabel: {
            show: true,
            margin: -8, // 负数使得单位文字靠近 Y 轴
            textStyle: {
              color: 'rgba(255,255,255,0.88)',
              fontFamily: 'PingFang SC, PingFang SC-Regular',
              fontSize: 11,
              fontWeight: 400
            },
            interval: 'auto',
            formatter: '{value}'
          }
        }]
      }
      option.series = seriesData.map((item, index) => {
        return {
          name: legendList[index],
          type: typeList[0],
          symbolSize: 4,
          smooth: smooth,
          itemStyle: {
            normal: {
              barBorderRadius: [100, 100, 0, 0],
              color: colorList[index]
            }
          },
          label: {
            show: topShow,
            position: 'top',
            textStyle: {
              fontSize: 11,
              color: 'rgba(255,255,255,0.92)'
            }
          },
          data: item
        }
      })
      if (this.chart) {
        this.chart.clear()
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
